/*兼容小尺寸设备,小于等于620px的*/
@media screen and (max-width: 620px){
    header {
        width: 100vw;
        height: 100vh;
        background-image: url("https://api.ixiaowai.cn/api/api.php");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: top center;
        /*设置背景图片为顶部居中，用于兼容小尺寸设备体验*/
      }
      header > nav {
        width: 100vw;
        height: 65px;
        display: flex;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 9000;
        transition: 200ms;
        justify-content: center;
        align-items: center;
        background-color: rgba(0, 0, 0, 0.6);
        padding: 0px 6vw;
      }
      header > nav h1 {
        margin-right: auto;
        font-size: 32px;
        color: white;
        cursor: pointer;
        transition: 400ms;
      }
      header > nav h1:hover {
        color: gray;
      }
      header > nav > ul {
        display: flex;
        position: absolute;
        top: 64px;
        width: 100vw;
        height: auto;
        padding: 25px 0px;
        transform-origin: top center;
        transition: 1s;
        transform: translateY(-200%);
        list-style: none;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background-color: rgba(0, 0, 0, 0.6);
        z-index: 6000;
      }
      header > nav > ul > li {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        padding: 4px 0px;
        transition: 400ms;
        transition-delay: 50ms;
      }
      header > nav > ul > li > a {
        color: white;
      }
      header > nav > ul > li:hover a {
        color: red;
        font-weight: 900;
        transition: 400ms;
        transition-delay: 50ms;
      }
      header > nav > ul > li:hover i {
        color: red;
        font-weight: 900;
      }
      header > nav > ul > li > i {
        color: white;
        margin-right: 5px;
        transition: 400ms;
        transition-delay: 50ms;
      }
      header > nav #header_nav_span {
        display: inline-block;
      }
      header div {
        width: 100vw;
        height: 100vh;
        position: absolute;
        top: 0;
        left: 0;
        padding: 0px 60px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-color: rgba(0, 0, 0, 0.4);
        transition: 200ms;
      }
      header div *:nth-last-of-type(n+1) {
        margin-bottom: 35px;
      }
      header div *:nth-last-of-type {
        margin: 0;
      }
      header div h2 {
        display: flex;
        color: white;
        font-size: 28px;
      }
      header div p {
        color: white;
        font-size: 18px;
        text-align: center;
      }
      header div a {
        color: white;
        padding: 8px 22px;
        text-align: center;
        background-color: #87CEEB;
        border-radius: 50px;
        font-size: 16px;
        transition: 400ms;
      }
      header div a:hover {
        background-color: white;
        color: #87CEEB;
      }
      
}
/*兼容小尺寸设备,小于等于620px的*/

/*兼容大尺寸设备,大于等于621px的*/
@media screen and (min-width: 621px){
    header {
        width: 100vw;
        height: 100vh;
        background-image: url("https://api.ixiaowai.cn/api/api.php");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: top center;
        /*设置背景图片为顶部居中，用于兼容小尺寸设备体验*/
      }
      header > nav {
        width: 100vw;
        height: 65px;
        display: flex;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 9000;
        transition: 200ms;
        justify-content: center;
        align-items: center;
        background-color: rgba(0, 0, 0, 0.6);
        padding: 0px 6vw;
      }
      header > nav h1 {
        margin-right: auto;
        font-size: 32px;
        color: white;
        cursor: pointer;
        transition: 400ms;
      }
      header > nav h1:hover {
        color: gray;
      }
      header > nav > ul {
        display: flex;
        height: 100%;
        list-style: none;
      }
      header > nav > ul > li {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        padding: 0px 8px;
        transition: 400ms;
        transition-delay: 50ms;
      }
      header > nav > ul > li:hover {
        background-color: white;
      }
      header > nav > ul > li:hover a {
        color: black;
        font-weight: 900;
      }
      header > nav > ul > li:hover i {
        color: black;
        font-weight: 900;
      }
      header > nav > ul > li > i {
        color: white;
        margin-right: 5px;
        transition: 400ms;
        transition-delay: 50ms;
      }
      header > nav > ul > li > a {
        color: white;
        transition: 400ms;
        transition-delay: 50ms;
      }
      header > nav #header_nav_span {
        display: none;
      }
      header div {
        width: 100vw;
        height: 100vh;
        position: absolute;
        top: 0;
        left: 0;
        padding: 0px 60px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-color: rgba(0, 0, 0, 0.4);
        transition: 200ms;
      }
      header div *:nth-last-of-type(n+1) {
        margin-bottom: 35px;
      }
      header div *:nth-last-of-type {
        margin: 0;
      }
      header div h2 {
        display: flex;
        color: white;
        font-size: 28px;
      }
      header div p {
        color: white;
        font-size: 18px;
        text-align: center;
      }
      header div a {
        color: white;
        padding: 8px 22px;
        text-align: center;
        background-color: #87CEEB;
        border-radius: 50px;
        font-size: 16px;
        transition: 400ms;
      }
      header div a:hover {
        background-color: white;
        color: #87CEEB;
      }
      
}
/*兼容大尺寸设备,大于等于621px的*/
